<template>
  <video id="video" autoplay style="height: 100%; width: 100%"></video>
</template>

<script setup>
  import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue';
  import { useRoute } from 'vue-router';
  const route = useRoute();
  let id = '101';
  const webRtcServer = ref();
  const initWebRtcServer = async () => {
    nextTick(() => {
      // video：需要绑定的video控件ID
      //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
      // webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//192.168.10.26:8000')
      webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000');
      //需要查看的rtsp地址
      // webRtcServer.value.connect('rtsp://admin:a12345678@192.168.3.11:554/Streaming/Channels/101')
      webRtcServer.value.connect('rtsp://admin:hik12345@192.168.110.100:554/Streaming/Channels/' + id);
    });
  };
  //页面销毁时销毁webRtc
  const webRtcServerDis = computed(() => {
    webRtcServer.value.disconnect();
    webRtcServer.value = null;
  });
  onMounted(() => {
    const query = route.query.id;
    if (query) {
      id = query;
    }
    initWebRtcServer();
  });
  onUnmounted(() => {
    webRtcServer.value.disconnect();
    webRtcServer.value = null;
  });
</script>

<style scoped></style>
